<script setup>
defineProps(['title','guessList','isFinish'])
</script>

<template>
	<view class="goods-list">
		<view class="title" v-if="title">{{title}}</view>
		<view class="goods">
			<navigator :url="`/pagesGoods/detail/detail?goodsId=${item.id}`" class="nav" v-for="item in guessList" v-bind:key="item.id">
				<image :src="item.imageUrl" class="img" mode="aspectFill"></image>				
				<view class="desc">
					<view class="good-name">{{item.name}}</view>
					<view class="intro">{{item.floralLanguage}}</view>
					<view class="bottom">
						<view class="price-content">
							<text class="price">￥{{item.price}}</text>
							<text class="del-price">￥{{item.stockCount}}</text>
						</view>
						<view class="add-cart"><text class="iconfont icon-gouwuche1 icon"></text></view>
					</view>
				</view>
			</navigator>
		</view>		
		<view class="loading-more" >			
			<text v-show="!isFinish">查看更多</text>
			<text v-show="isFinish">没有更多了</text>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.goods-list{
	.title{
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		padding: 18rpx 0;
	}
	.goods{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		.nav:nth-child(2n){
			margin-left: 20rpx;
		}
		.nav{
			width: 48%;
			background: #ffffff;
			margin-bottom:20rpx;
			overflow: hidden;
			.img{
				width: 100%;
				height: 480rpx;
			}
			.desc{
				padding: 0 16rpx;
				.good-name{
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-weight: bold;
					font-size: 32rpx;
					margin-bottom: 24rpx;
				}
				.intro{
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					font-size: 24rpx;
					color: #9d9d9d;
					margin-bottom: 16rpx;
				}
				.bottom{				
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.price-content{
						.price{
							font-weight: bold;
							font-size: 30rpx;
							color: #f3514f;
							margin-right: 12rpx;
						}
						.del-price{
							color: #9d9d9d;
							font-size: 24rpx;
							text-decoration: line-through;
						}
					}
					.icon{
						background: #f3514f;
						font-size: 40rpx;
						border-radius: 50%;
						padding: 2rpx;
					}
				}
			}
		}
	}
	.loading-more{
		background: white;
		text-align: center;
		font-size: 24rpx;
		color: #8d8d8d;
		padding: 18rpx 0;
		border-radius: 10rpx;
	}
}
</style>